<template>
    <div class="home">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="全部" name="all"></el-tab-pane>
            <el-tab-pane label="数码" name="second"></el-tab-pane>
            <el-tab-pane label="家电" name="third"></el-tab-pane>
            <el-tab-pane label="户外" name="outside"></el-tab-pane>
            <el-tab-pane label="图书" name="book"></el-tab-pane>
            <el-tab-pane label="其他" name="other"></el-tab-pane>
        </el-tabs>
        <div class="main">
            <div class="list">
                <MyList :list="product" v-if="product.length>0"></MyList>
                <div v-else class="none-product">抱歉没有找到相关的商品，请看看其他的商品</div>
            </div>
            <!-- 分页 -->
            <div class="pagination">
                <el-pagination
                background
                layout="prev, pager, next"
                :page-size="pageSize"
                :total="total"
                @current-change="currentChange"
                ></el-pagination>
            </div>
            <!-- 分页END -->
        </div>
    </div>
</template>
<script>
export default{
    data(){
        return{
            activeName:'all',
            product: [{
                id:1,
                img:'images/goods/good1.jpg',
                time:'2024-04-04 12:00',
                sku_name:'默认商品',
                title: '杭州市',
                selling_price: '99.00',
                price: '100.00',
                seller_ava:'/avatar/男孩.png',
                seller_name:'小黄'
            },{
                id:2,
                img:'images/goods/good2.jpg',
                time:'2024-04-04 12:00',
                sku_name:'默认商品',
                title: '杭州市',
                selling_price: '100.00',
                price: '100.00',
                seller_ava:'/avatar/男孩.png',
                seller_name:'小黄'
            },{
                id:3,
                img:'images/goods/good3.jpg',
                time:'2024-04-04 12:00',
                sku_name:'默认商品',
                title: '杭州市',
                selling_price: '100.00',
                price: '100.00',
                seller_ava:'/avatar/男孩.png',
                seller_name:'小黄'
            },{
                id:4,
                img:'images/goods/good1.jpg',
                time:'2024-04-04 12:00',
                sku_name:'默认商品',
                title: '杭州市',
                selling_price: '100.00',
                price: '100.00',
                seller_ava:'/avatar/男孩.png',
                seller_name:'小黄'
            },{
                id:5,
                img:'images/goods/good2.jpg',
                time:'2024-04-04 12:00',
                sku_name:'默认商品',
                title: '杭州市',
                selling_price: '100.00',
                price: '100.00',
                seller_ava:'/avatar/男孩.png',
                seller_name:'小黄'
            },{
                id:6,
                img:'images/goods/good1.jpg',
                time:'2024-04-04 12:00',
                sku_name:'默认商品',
                title: '杭州市',
                selling_price: '100.00',
                price: '100.00',
                seller_ava:'/avatar/男孩.png',
                seller_name:'小黄'
            },{
                id:7,
                img:'images/goods/good3.jpg',
                time:'2024-04-04 12:00',
                sku_name:'默认商品',
                title: '杭州市',
                selling_price: '100.00',
                price: '100.00',
                seller_ava:'/avatar/男孩.png',
                seller_name:'小黄'
            }], // 商品列表
            total: 0, // 商品总量
            pageSize: 15, // 每页显示的商品数量
            currentPage: 1, //当前页码
        }
    },
    created:{

    },
    methods:{
        // 标签选择
        handleClick(tab, event) {
            console.log(tab, event);
        },
        // 页码变化调用currentChange方法
        currentChange(currentPage) {
            this.currentPage = currentPage;
        },
    }
}
</script>
<style scoped>
.home{
    background-color: #fff;
}

/* 主要内容区CSS */
.home .main {
  margin: 0 auto;
  max-width: 1225px;
}
.home .main .list {
  min-height: 650px;
  padding-top: 14.5px;
  margin-left: -13.7px;
  overflow: auto;
}
.home .main .pagination {
  height: 50px;
  text-align: center;
}
.home .main .none-product {
  color: #333;
  margin-left: 13.7px;
}
/* 主要内容区CSS END */
</style>